<template>
  <div class="about">
    <h1>This is an about page</h1>
    <input type="text" v-model="inpVal" />
    <button @click="submitEvent">登陆</button>
    <hr />
    <!-- <input />/> -->
    <div :style="{width: '100px', height: '100px'}">
      <ImageView
        :round="true"
        src="https://img.dmallcdn.com/dshop/202004/b6a1eeae-9949-4958-8c23-2919c38d619d_750H"
      />
    </div>

    <ul>
      <li v-for="(item, index) in list" :key="index" @click="deleteItem(index)">{{item}}</li>
    </ul>
  </div>
</template>
<script>
// https://img.dmallcdn.com/dshop/202004/b6a1eeae-9949-4958-8c23-2919c38d619d_750H
import { mapActions, mapState } from "vuex";
import ImageView from "../components/base/imageView";
export default {
  components: {
    ImageView
  },
  data() {
    return {
      inpVal: ""
    };
  },
  computed: {
    ...mapState(["list"])
  },
  methods: {
    ...mapActions(["addInputValue", "removeItem"]),
    submitEvent() {
      this.addInputValue(this.inpVal);
      this.inpVal = "";
    },
    deleteItem(index) {
      this.removeItem(index);
    }
  }
};
</script>
<style lang="scss">
</style>
